import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class WeChatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Color(0xFFF5F9FB),
      appBar: AppBar(
        // backgroundColor: Color(0xFFF5F9FB),
        title: Text(LocaleKeys.wechat_connect.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
        // leading: IconButton(
        //   padding: EdgeInsets.only(left: 40.w,),
        //   icon: Image.asset("assets/images/space/icon_appbar_arrow_back.png"),
        //   onPressed: () { Get.back(); },
        // ),
        // leadingWidth: 25,
      ),
      body: Column(
        children: [
          Container(
              width: 1.sw,
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 100.h),
              child: Text(LocaleKeys.wechat_tips.ts, style: TextStyle(fontSize: 45.sp, color: ColorConst.btnFontColor),)
          ),
          Container(
            margin: EdgeInsets.only(top: 138.h),
            width: 1.sw,
            height: 200.h,
            child: Expanded(
              child: _MyMultiChildLayout(
                children: [
                  LayoutId(id: 'A', child: Container(
                    width: 58.w,
                    height: 58.w,
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(bottom: 29.h),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      color: ColorConst.accentColor,),
                    child: Text('1', style: TextStyle(color: Colors.white, fontSize: 36.sp),),
                  ),),
                  LayoutId(id: 'B', child: Container(
                      width: 250.w,
                      height: 9.h,
                      color: ColorConst.accentColor
                  )),
                  LayoutId(id: 'C', child: Container(
                    width: 58.w,
                    height: 58.w,
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(bottom: 29.h),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      color: ColorConst.accentColor,),
                    child: Text('2', style: TextStyle(color: Colors.white, fontSize: 36.sp),),
                  ),),
                  LayoutId(id: 'D', child: Container(
                      width: 250.w,
                      height: 9.h,
                      color: ColorConst.accentColor
                  )),
                  LayoutId(id: 'E', child: Container(
                    width: 58.w,
                    height: 58.w,
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(bottom: 29.h),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      color: ColorConst.accentColor,),
                    child: Text('3', style: TextStyle(color: Colors.white, fontSize: 36.sp),),
                  ),),
                  LayoutId(id: 'F', child: Text(LocaleKeys.wechat_step_01.ts, textAlign: TextAlign.center, style: TextStyle(fontSize: 36.sp, color: ColorConst.secondaryFontColor))),
                  LayoutId(id: 'G', child: Text(LocaleKeys.wechat_step_02.ts, textAlign: TextAlign.center, style: TextStyle(fontSize: 36.sp, color: ColorConst.secondaryFontColor))),
                  LayoutId(id: 'H', child: Text(LocaleKeys.wechat_step_03.ts, textAlign: TextAlign.center, style: TextStyle(fontSize: 36.sp, color: ColorConst.secondaryFontColor))),
                ],
              ),),
          ),

          Container(
              width: 820.w,
              height: 832.w,
              alignment: Alignment.center,
              padding: EdgeInsets.only(top: 115.h),
              child: Image.asset('assets/images/device/device_qrcode.png', fit: BoxFit.fill,)
          ),
          Container(
            width: 1.sw,
            height: 135.h,
            margin: EdgeInsets.fromLTRB(43.w, 244.h, 43.w, 0),
            child: ElevatedButton(
              onPressed: () {

              },
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(ColorConst.activeColor),
                  shape: MaterialStateProperty.all(RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)
                  ))
              ),
              child: Text(LocaleKeys.person_save.ts, style: TextStyle(fontSize: 48.sp, color: Colors.white, ),),
            ),
          )
        ],
      ),
    );
  }
}

class _MyMultiChildLayout extends CustomMultiChildLayout {
  _MyMultiChildLayout({
    List<Widget> children = const <Widget>[],
  }) : super(
      delegate: _MyMultiChildLayoutDelegate(children),
      children: children);
}

class _MyMultiChildLayoutDelegate extends MultiChildLayoutDelegate {
  List<String> layoutIds=[];
  Map<String, Size> sizeMap = {};

  _MyMultiChildLayoutDelegate(List<Widget> children) {
    layoutIds = _getLayoutIds(children);
  }

  _getLayoutIds(List<Widget> children) {
    return children.map((e) {
      return (e as LayoutId).id as String;
    }).toList();
  }

  @override
  void performLayout(Size size) {
    //布局子组件
    print('performLayout size = $size/$layoutIds');
    double offset = 226.w;
    for (String id in layoutIds) {
      if (hasChild(id)) {
        sizeMap[id] = layoutChild(id, BoxConstraints());
        switch (id) {
          case 'A':
            positionChild(id, Offset(offset, 0));
            break;
          case 'B':
            positionChild(id, Offset(offset+sizeMap['A']!.width, 29.h));
            break;
          case 'C':
            positionChild(id, Offset(offset+sizeMap['A']!.width+sizeMap['B']!.width, 0));
            break;
          case 'D':
            positionChild(id, Offset(offset+sizeMap['A']!.width+sizeMap['B']!.width+sizeMap['C']!.width, 29.h));
            break;
          case 'E':
            positionChild(id, Offset(offset+sizeMap['A']!.width+sizeMap['B']!.width+sizeMap['C']!.width+sizeMap['D']!.width, 0));
            break;
          case 'F':
            positionChild(id, Offset(offset-(sizeMap['F']!.width/3), sizeMap['A']!.height));
            break;
          case 'G':
            positionChild(id, Offset(offset+sizeMap['A']!.width+sizeMap['B']!.width-(sizeMap['G']!.width/3), sizeMap['C']!.height));
            break;
          case 'H':
            positionChild(id, Offset(offset+sizeMap['A']!.width+sizeMap['B']!.width+sizeMap['C']!.width+sizeMap['D']!.width-(sizeMap['H']!.width/3), sizeMap['E']!.height));
            break;
        }
      }
    }
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) {
    print('shouldRelayout');
    sizeMap.clear();
    return true;
  }

  @override
  void positionChild(Object childId, Offset offset) {
    //定位子组件
    super.positionChild(childId, offset);
  }

  @override
  Size layoutChild(Object childId, BoxConstraints constraints) {
    //确定child的约束，用于确定child的大小
    print('layoutChild childId = $childId constraints = $constraints');
    return super.layoutChild(childId, constraints);
  }


  @override
  Size getSize(BoxConstraints constraints) {
    //获取父容器约束条件确定CustomSingleChildLayout大小
    print('getSize constraints = $constraints');
    return super.getSize(constraints);
  }

  @override
  String toString() {
    return super.toString();
  }

  @override
  bool hasChild(Object childId) {
    //子组件是否存在
    return super.hasChild(childId);
  }
}